<!DOCTYPE html>
<html lang="zh-Hans">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="a web resume for demo" />
    <meta name="keywords" content="resume,demo" />
    <title>Web Resume</title>
    <link rel="shortcut icon" href="favicon.png" type="image/x-icon" />
    <link rel="stylesheet" href="./stylesheets/main.css" />
    <link rel="stylesheet" href="./libs/@mdi/css/materialdesignicons.min.css" />
  </head>

  <body>
    <article>
      <section class="home">
        <nav>
          <span class="slogan">
            <span
              class="mdi mdi-lighthouse-on"
              aria-label="6xu's resume"
            ></span>
          </span>
          <div class="link">
            <a href="#whyme">为什么要选我？</a>
            <a href="#services">工作与教育经历</a>
            <a href="#portfolio">作品展示</a>
            <a href="#contact">共同合作</a>
          </div>
          <div class="mobile-title">
            Web Resume
          </div>
        </nav>
        <div class="introduce">
          <p class="welcome">欢迎想了解我的你👏</p>
          <p class="name">我是六绪</p>
          <p class="job">前端工程师</p>
          <p class="description">【三年前端路茫茫，回头一想干了啥？】</p>
        </div>
        <div class="director">
          <a class="primary-btn" href="#">让我们一起工作吧</a>
          <a class="secondary-btn" href="#portfolio">看看我的作品</a>
        </div>
        <div class="more">
          <a href="#whyme" aria-label="继续看下面的内容">
            <span class="mdi mdi-arrow-down"></span>
          </a>
        </div>
        <div class="nav-backshadow"></div>
      </section>

      <!-- me skill -->
      <a name="whyme" aria-hidden="true"></a>
      <section class="me">
        <div class="aboutme">
          <div class="why-me">
            <h2>为什么要选我？</h2>
            <p>
              滚滚长江东逝水，浪花淘尽英雄。是非成败转头空。青山依旧在，几度夕阳红。白发渔樵江渚上，惯看秋月春风。一壶浊酒喜相逢。古今多少事，都付笑谈中。
            </p>
            <p>
              滚滚长江东逝水，浪花淘尽英雄。是非成败转头空。青山依旧在，几度夕阳红。白发渔樵江渚上，惯看秋月春风。一壶浊酒喜相逢。古今多少事，都付笑谈中。
            </p>
          </div>
          <div class="connect-with-me">
            <h2>想要更加了解我？</h2>
            <aside class="social-link">
              <a href="#" aria-label="qq">
                <span class="mdi mdi-qqchat"></span>
              </a>
              <a href="#" aria-label="wechat">
                <span class="mdi mdi-wechat"></span>
              </a>
              <a href="#" aria-label="github">
                <span class="mdi mdi-github"></span>
              </a>
              <a href="#" aria-label="email">
                <span class="mdi mdi-email"></span>
              </a>
              <a href="#" aria-label="netease music">
                <span class="mdi mdi-music"></span>
              </a>
              <a href="#" aria-label="weibo">
                <span class="mdi mdi-sina-weibo"></span>
              </a>
            </aside>
          </div>
        </div>
        <div class="aboutskill">
          <div>
            <h2>我的技能</h2>
            <ul class="skills">
              <li>
                <span style="width: 75%;">HTML</span
                ><span class="percent">：75%</span>
              </li>
              <li>
                <span style="width: 65%;">CSS</span
                ><span class="percent">：65%</span>
              </li>
              <li>
                <span style="width: 85%;">JavaScript</span
                ><span class="percent">：85%</span>
              </li>
              <li>
                <span style="width: 55%;">Angular</span
                ><span class="percent">：55%</span>
              </li>
              <li>
                <span style="width: 65%;">Vue.js</span
                ><span class="percent">：65%</span>
              </li>
              <li>
                <span style="width: 44%;">Node</span
                ><span class="percent">：44%</span>
              </li>
              <li>
                <span style="width: 89%;">ECharts</span
                ><span class="percent">：89%</span>
              </li>
            </ul>
          </div>
        </div>
      </section>

      <!-- services -->
      <a name="services" aria-hidden="true"></a>
      <section class="services">
        <h2 name="services">工作与教育经历</h2>
        <ol>
          <li>
            <h3>计算机相关专业背景</h3>
            <p>
              滚滚长江东逝水，浪花淘尽英雄。是非成败转头空。青山依旧在，几度夕阳红。白发渔樵江渚上，惯看秋月春风。一壶浊酒喜相逢。古今多少事，都付笑谈中。
            </p>
            <a href="javascript:;">了解更多</a>
          </li>
          <li>
            <h3>移动端前端开发</h3>
            <p>
              滚滚长江东逝水，浪花淘尽英雄。是非成败转头空。青山依旧在，几度夕阳红。白发渔樵江渚上，惯看秋月春风。一壶浊酒喜相逢。古今多少事，都付笑谈中。
            </p>
            <a href="javascript:;">了解更多</a>
          </li>
          <li>
            <h3>数据可视化行业经历</h3>
            <p>
              滚滚长江东逝水，浪花淘尽英雄。是非成败转头空。青山依旧在，几度夕阳红。白发渔樵江渚上，惯看秋月春风。一壶浊酒喜相逢。古今多少事，都付笑谈中。
            </p>
            <a href="javascript:;">了解更多</a>
          </li>
        </ol>
      </section>

      <!-- portfolio -->
      <a name="portfolio" aria-hidden="true"></a>
      <section class="portfolio">
        <h2>作品展示</h2>
        <div class="figures">
          <figure>
            <a href="https://gitee.com/woshi6xu/personal-website">
              <img src="./assets/2.jpg" alt="个人主页" />
              <figcaption>个人主页</figcaption>
            </a>
          </figure>

          <figure>
            <a href="https://gitee.com/woshi6xu/woshi6xu-vue-admin">
              <img src="./assets/1.jpg" alt="vue-admin" />
              <figcaption>woshi6xu-vue-admin</figcaption>
            </a>
          </figure>

          <figure>
            <img src="./assets/3.jpg" alt="测试作品3" />
            <figcaption>测试作品3</figcaption>
          </figure>
        </div>
      </section>

      <!-- contact -->
      <a name="contact" aria-hidden="true"></a>
      <section class="contact">
        <h2>共同合作</h2>
        <p>
          滚滚长江东逝水，浪花淘尽英雄。是非成败转头空。青山依旧在，几度夕阳红。白发渔樵江渚上，惯看秋月春风。一壶浊酒喜相逢。古今多少事，都付笑谈中。青山依旧在，几度夕阳红。白发渔樵江渚上，惯看秋月春风。一壶浊酒喜相逢。古今多少事，都付笑谈中。
        </p>
        <a class="contact-btn" href="javascript:;">让我们一起工作吧</a>
      </section>

      <!-- footer -->
      <section class="footer">
        <footer>
          Designed By Junaid Tariq, Build By @6xu
        </footer>
        <nav class="social-link">
          <a href="#" aria-label="qq">
            <span class="mdi mdi-qqchat"></span>
          </a>
          <a href="#" aria-label="wechat">
            <span class="mdi mdi-wechat"></span>
          </a>
          <a href="#" aria-label="github">
            <span class="mdi mdi-github"></span>
          </a>
          <a href="#" aria-label="email">
            <span class="mdi mdi-email"></span>
          </a>
          <a href="#" aria-label="netease music">
            <span class="mdi mdi-music"></span>
          </a>
          <a href="#" aria-label="weibo">
            <span class="mdi mdi-sina-weibo"></span>
          </a>
        </nav>
      </section>
    </article>
  </body>
</html>
